import './styles/selector.scss';
import React, { FC, useCallback, useEffect, useState } from 'react';
import { formatUserAnswer } from '../../lib/utils';
import { IQueryData, IState, IUserAnswer } from '../../typings';
import { useDispatch, useSelector } from 'react-redux';
import * as types from '../../store/actionTypes';
import { Dispatch } from 'redux';

import Button from '../Button';

interface IProps {
  id: string;
  //答题选项1 正确/错误/A/B/C/D
  item1: string;
  //答题选项2 正确/错误/A/B/C/D
  item2: string;
  //答题选项3 A/B/C/D
  item3: string;
  //答题选项4 A/B/C/D
  item4: string;
  onNextQuestion: () => void;
}

export enum SELECTORS {
  item1 = '1',
  item2 = '2',
  item3 = '3',
  item4 = '4'
}

const Selector: FC<IProps> = ({
  id,
  item1,
  item2,
  item3,
  item4,
  onNextQuestion
}) => {
  const dispatch: Dispatch = useDispatch();
  //设置默认答题选项为1 并打算将它作为默认聚集样式
  //curAnswer = 1
  const [curAnswer, setCurAnswer] = useState<SELECTORS>(SELECTORS.item1);
  //初始化userAnswer = null
  const [userAnswer, setUserAnswer] = useState<IUserAnswer | null>(null);
  const queryList: IQueryData[] = useSelector(
    (state: IState) => state.queryList
  );

  //事件代理处理点击答案选项 将用户答案存入state.userAnswer里
  const handleSelectorClick = (e: React.MouseEvent): void => {
    const tar: HTMLElement = e.target as HTMLElement;
    const className = tar.className;

    //点击<div class="item-btn active" data-answer="1"></div>时
    if (className === 'item-btn') {
      //获取data-answer的值
      const answer: SELECTORS = tar.dataset.answer as SELECTORS;

      //设置当前的答案1234 将获取data-answer的值修改至curAnswer的值
      setCurAnswer(answer);

      //设置用户的当前问题的答案
      //根据curAnswer的值,queryList,curQuestion.id 获取用户答案并存入userAnswer对象
      setUserAnswer(formatUserAnswer(queryList, id, curAnswer));

      /**
       * userAnswer:
       * {qid: '4', question: '驾驶机动车违反道路交通安全法律法规发生交通事故属于交通违章行为。', url: '', explains: '题干中有明确表述“违反道路交通安全法”，因此属于违法行为，并非违章行为。', userAnswer: '错误', …}
       */
    }
  };

  //页面加载绘制完毕后 将获取用户答案后并存入userAnswer对象
  useEffect(() => {
    if (queryList && id && curAnswer) {
      setUserAnswer(formatUserAnswer(queryList, id, curAnswer));
    }
  }, [queryList, id, curAnswer]);

  //点击下一题按钮
  const goNext: () => void = useCallback(() => {
    //将userAnswer对象存入state.userAnswers数组里
    dispatch({ type: types.SET_USER_ANSWER, payload: userAnswer });

    //将下一题当前userAnswer的值更改重置为第一项
    setCurAnswer(SELECTORS.item1);

    //执行父组件的方法
    onNextQuestion();
  }, [dispatch, userAnswer, onNextQuestion]);

  return (
    <div className="selector-panel" onClick={handleSelectorClick}>
      <div className="item">
        {/* 答题选项1 正确 */}
        <div
          className={[
            'item-btn',
            curAnswer === SELECTORS.item1 ? ' active' : ''
          ].join('')}
          data-answer={SELECTORS.item1}
        >
          {item1 || '加载中...'}
        </div>
      </div>
      {/* 答题选项2 错误 */}
      <div className="item">
        <div
          className={[
            'item-btn',
            curAnswer === SELECTORS.item2 ? ' active' : ''
          ].join('')}
          data-answer={SELECTORS.item2}
        >
          {item2 || '加载中...'}
        </div>
      </div>
      {/* 答题选项3 4 按需加载 */}
      {item3 && item4 && item3.length && item4.length && (
        <>
          <div className="item">
            <div
              className={[
                'item-btn',
                curAnswer === SELECTORS.item3 ? ' active' : ''
              ].join('')}
              data-answer={SELECTORS.item3}
            >
              {item3 || '加载中...'}
            </div>
          </div>
          <div className="item">
            <div
              className={[
                'item-btn',
                curAnswer === SELECTORS.item4 ? ' active' : ''
              ].join('')}
              data-answer={SELECTORS.item4}
            >
              {item4 || '加载中...'}
            </div>
          </div>
        </>
      )}
      {/* 下一题按钮 */}
      <Button btnTitle="下一题" handleClick={goNext}></Button>
    </div>
  );
};

export default Selector;
